<template>
	<div>
		<div class="breadcrumb">
			<el-button type="text" @click="$router.back()" icon="el-icon-arrow-left" style="font-size: 14px;">返回上一页</el-button>
		</div>
		<div class="tableNavBox">
			<div class="menberConTitle flex" style="justify-content: space-between;">
				<div class="tableTitle">职称等级</div>
			</div>
			<div>
				<el-form :model="formInline" class="demo-form-inline" label-width="100px">
						<el-form-item label="获得日期：">
							<el-date-picker v-model="formInline.getDate" class="formInput" type="month" format="yyyy-MM" value-format="yyyy-MM" placeholder="选择年月"></el-date-picker>
						</el-form-item>
					<el-form-item label="所属行业：">
						<el-select v-model="formInline.dictionariesId" class="formInput" placeholder="请选择所属行业">
						      <el-option v-for="item in dictionaries" :key="item.id" :label="item.menuName" :value="item.id"></el-option>
						    </el-select>
					</el-form-item>
					<el-form-item label="职称等级：">
						<div v-if="!isEditor">
							<el-select v-model="formInline.rankId" class="formInput"  placeholder="请选择职称等级">
							     <el-option v-for="list in rankNameList" :label="list.rankName"  :value="list.id"></el-option>
							     <!-- <el-option label="区域二" value="beijing"></el-option> -->
							   </el-select>
							   <el-button type="text" round @click="isEditor = true" icon="el-icon-edit">自定义职级</el-button>
						</div>
						<div v-else>
							<el-input v-model="formInline.rankName" class="formInput" placeholder="请输入职称等级"></el-input>
							<el-button type="text" round @click="isEditor = false">取消</el-button>
						</div>
					</el-form-item>
					<el-form-item label="证书：">
						<el-upload
						  class="avatar-uploader"
						  action=""
						  :http-request="uploadFile"
						  :show-file-list="false">
						  <img v-if="formInline.rankPicture" :src="formInline.rankPicture" class="avatar">
						  <div v-else>
							  <i  class="el-icon-plus avatar-uploader-icon"></i>
							  <p><span>上传证书图片</span></p>
						  </div>
						</el-upload>
					</el-form-item>
				</el-form>
			</div>
		</div>
		<div class="bottomBtns">
			<!-- <el-button type="primary" round @click="$router.back()">返回</el-button> -->
			<el-button type="primary" round @click="submit">完成</el-button>
		</div>
	</div>
</template>

<script>
	import add from '../utils/index.js'
	export default {
		data() {
			return {
				formInline: {
					rankId: '', // 职级ID
					rankName: '', // 自定义职级名称
					getDate: '', // 获得时间
					dictionariesId: '', // 所属行业字典id
					isOpen: '1', // 是否公开
					rankPicture: '', // 职级图片
				},
				isEditor: false, // 是否自定义职级
				dictionaries: '',
				isUpdete: false,
				dataIndex: '',
				rankNameList: '' // 职级列表
			}
		},
		created() {
			this.$store.commit('industrialis_leftNavIndex', 11)
		},
		mounted() {
			this.getDictionaries()
			this.getRankNameList()
			if (this.$route.query.index > -1) {
				this.dataIndex = this.$route.query.index
				// 页面数据渲染
				add.rankname.getSelf(this.dataIndex, (data) => {
					if(data.rankName){
						this.formInline.rankName = data.rankName
						this.isEditor = true
					} else {
						this.formInline.rankId = data.rankId
						this.isEditor = false
					}
					this.formInline.getDate = data.getDate
					this.formInline.dictionariesId = data.dictionariesId
					this.formInline.isOpen = data.isOpen
					this.formInline.rankPicture = data.rankPicture
				})
				this.isUpdete = true
			} else {
				this.isUpdete = false
			}
		},
		watch: {


		},
		methods: {
			submit(){
				if(!this.formInline.getDate){
					this.$message.error('请选择获得时间')
					return
				} else if(!this.formInline.dictionariesId){
					this.$message.error('请选择所属行业')
					return
				}
				if(this.isEditor){
					if(!this.formInline.rankName){
						this.$message.error('请输入职级名称')
						return
					} else {
						this.formInline.rankId = ''
					}
				} else {
					if(!this.formInline.rankId){
						this.$message.error('请选择职级')
						return
					} else {
						this.formInline.rankName = ''
					}
				}
				
				if(!this.isUpdete){
					add.rankname.addition(this.formInline)
				} else {
					add.rankname.update(this.formInline, this.dataIndex)
				}
				this.$router.back()
			},
			uploadFile(file){
				// 上传文件
				let File = file.file
				add.uploadFile(File, (data) => {
					this.formInline.rankPicture = data
					this.$message.success('上传成功')
				})
			},
			getDictionaries(){
				// 服务产业dictionaries
				this.$request.get(this.$api.getWorkbenchMenu).then(res=>{
					if(res.code == 200){
						this.dictionaries = res.data
					}
				})
			},
			getRankNameList(){
				// 获取职级列表
				this.$request.postForm(this.$api.getAllRank).then(res=>{
					if(res.code == 200){
						this.rankNameList = res.data
					}
				})
			}
		}
	}
</script>

<style scoped="scoped">
	.breadcrumb,
	.tableNavBox {
		padding: 20px;
	}

	.tableNavBox {
		padding-top: 0;
		min-height: 595px;
	}

	.tableTitle {
		font-size: 16px;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #333333;
		line-height: 30px;
	}

	.menberConTitle {
		width: 100%;
		background: #F3F3F3;
		text-align: left;
		padding: 5px 20px;
		margin-bottom: 20px;
		/* margin-top: 20px; */
	}

	.topButton {
		width: 78px;
	}
	.formInput{
		width: 420px;
	}
	.formDate{
		width: 150px;
	}
	.avatar-uploader>>>.el-upload {
	    /* border: 1px dashed #d9d9d9; */
		border: 1px solid #d9d9d9;
	    /* border-radius: 6px; */
	    cursor: pointer;
	    position: relative;
	    overflow: hidden;
		color: #AAAAAA;
	  }
	  .el-upload p{
		  height: 32px;
		  margin-top: -32px;
		  font-size: 12px;
	  }
	  .avatar-uploader .el-upload:hover {
	    border-color: #409EFF;
	  }
	  .avatar-uploader-icon {
	    font-size: 28px;
	    color: #8c939d;
	    width: 240px;
	    height: 150px;
	    line-height: 150px;
	    text-align: center;
	  }
	  .avatar {
	    width: 240px;
	    height: 150px;
	    display: block;
	  }
	  .bottomBtns{
	  	width: 100%;
	  	border-top: 1px solid #DCDCDC;
	  	padding: 30px 0;
	  	text-align: center;
	  }
	  .bottomBtns button{
	  	width: 100px;
	  }
</style>
